<template>
  <div
    :style="{
      fontSize: detail.style.fontSize + 'px',
      fontFamily: detail.style.fontFamily,
      color: detail.style.fontColor,
      textAlign: textAlign,
      lineHeight: lineHeight + 'px',
    }"
  >
    <div v-if="deviceSetting.type === 'fixedParam'" class="flex justify-between">
      <el-button
        v-for="(setting2,index2) in deviceSetting.paramList"
        :key="index2"
        type="primary"
        :plain="setting2.value !==deviceSetting.value"
        :disabled="setting2.disabled || detail.dataBind.editModel"
        @click="btnGroupSetting(setting2.value)"
      >{{ setting2.name }}
      </el-button>
    </div>
    <div v-else-if="deviceSetting.type === 'switch'">
      <el-switch
        v-model="deviceSetting.value"
        :disabled="deviceSetting.disabled || detail.dataBind.editModel"
        active-value="1"
        inactive-value="0"
        @change="switchChange()"
      />
    </div>
    <div v-else-if="deviceSetting.type === 'time'" class="flex justify-between">
      <el-time-picker
        v-model="deviceSetting.value"
        :disabled="deviceSetting.disabled || detail.dataBind.editModel"
        style="min-width:150px"
        value-format="HH:mm"
        format="HH:mm"
        :placeholder="$t('timing')"
      />
      <div class="mx-1">
        <el-button
          type="primary"
          :disabled="deviceSetting.disabled || detail.dataBind.editModel"
          @click.stop="oneTimeChange()"
        >{{ $t('confirm') }}
        </el-button>
      </div>
    </div>
    <div v-else-if="deviceSetting.type === 'timeSlot'" class="flex justify-between">
      <time-slot v-model="deviceSetting.value" :disabled="deviceSetting.disabled || detail.dataBind.editModel"/>
      <div class="mx-1">
        <el-button
          type="primary"
          :disabled="deviceSetting.disabled || detail.dataBind.editModel"
          @click.stop="twoTimeChange()"
        >{{ $t('confirm') }}
        </el-button>
      </div>
    </div>
    <div v-else-if="deviceSetting.type === 'noParam'">
      <el-button
        type="text"
        style="width: 100%"
        :disabled="deviceSetting.disabled || detail.dataBind.editModel"
        @click.stop="btnSetting()"
      >{{ deviceSetting.name }}
      </el-button>
    </div>
    <div v-else-if="deviceSetting.type === 'slider'">
      <el-slider
        v-model="deviceSetting.value"
        style="width: 100%"
        :disabled="deviceSetting.disabled || detail.dataBind.editModel"
        @change="switchChange()"
      />
    </div>
    <div v-else class="flex justify-between">
      <el-input v-model="deviceSetting.value" style="min-width:50px"
                :disabled="deviceSetting.disabled || detail.dataBind.editModel"
      />
      <div class="mx-1">
        <el-button
          type="primary"
          :disabled="deviceSetting.disabled || detail.dataBind.editModel"
          @click.stop="setParameter()"
        >{{ $t('confirm') }}
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import BaseView from '../../BaseView'
import { getDeviceSetting, sendDeviceSetting } from '@/api/iot/iotDeviceSettingApi'
import { successNotice } from '@/util/common'
import TimeSlot from '@/components/TimeSlot'

export default {
  name: 'IotDeviceSetting',
  components: {
    TimeSlot
  },
  extends: BaseView,
  props: {},
  data() {
    return {
      deviceSetting: {}
    }
  },
  watch: {
    detail: function(newVal) {
      this.getDeviceSetting()
    }
  },
  created() {
    this.getDeviceSetting()
  },
  methods: {
    setParameter() {
      this.updateVal()
    },
    btnSetting() {
      this.updateVal()
    },
    paramListSetting() {
      this.updateVal()
    },
    btnGroupSetting(value) {
      this.deviceSetting.value = value
      this.updateVal()
    },
    switchChange() {
      this.updateVal()
    },
    oneTimeChange() {
      this.updateVal()
    },
    twoTimeChange() {
      this.updateVal()
    },
    updateVal() {
      const json = {
        settingId: this.deviceSetting.settingId,
        value: this.deviceSetting.value
      }
      sendDeviceSetting(json).then(res => {
        const { code } = res
        this.settingLoading = false
        if (code === '200') {
          successNotice(this)
        }
        this.getDeviceSetting()
      })
    },
    getDeviceSetting() {
      getDeviceSetting({
        deviceId: this.detail.dataBind.deviceId,
        keyName: this.detail.dataBind.keyName,
        port: this.detail.dataBind.port
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.deviceSetting = data
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
@import '@/styles/element-variables.scss';

.primary-color {
  color: $--color-primary;
}

</style>
